// 类组件
import React, { Component } from 'react'
// Route 定义路由规则所用
// Link/NavLink 声明式导航  NavLink它有激活样式  统一编译出来的html都为a标签
// Switch 它只会匹配成功一次，后续就不会继续匹配
import { Route, Switch } from 'react-router-dom'

// 引入需要渲染的组件
import News from './views/News'
import Detail from './views/Detail'

class App extends Component {
  render() {
    return (
      <div>
        <Switch>
          <Route path="/news" component={News} />
          {/* 定义动态路由参数,使用:名称，此名称就是后续获取数据名称 */}
          {/* :id? 可选路由参数 */}
          <Route path="/detail/:id?" component={Detail} />
          {/* <Route path="/detail/:id" component={Detail} /> */}
        </Switch>
      </div>
    )
  }
}

export default App
